<template>
  <div style="padding-bottom:100px;">
    <div v-title>提交投保信息</div>
    <img src="../image/single.png" style="width:100%;" />
    <div class="box">
      <div class="title">
        <div>{{QuoteInfor.InsuranceName}}</div>
      </div>
      <div class="content">
        <div>交强险
          <span style="color:#f33e16;">（不参与分期）</span>
          <p>￥{{Number(QuoteInfor.MustMoney).toFixed(2)}}</p>
        </div>
        <div>车船使用税
          <span style="color:#f33e16;">（不参与分期）</span>
          <p>￥{{Number(QuoteInfor.UsageMoney).toFixed(2)}}</p>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="title">
        <div>车主信息</div>
      </div>
      <div class="info">
        <p>车主姓名：{{QuoteInfor.CarOwner}}</p>
        <p>车牌号码：{{QuoteInfor.PlateNumber}}</p>
      </div>
    </div>
    <div class="box">
      <div class="title">
        <div>保单寄送</div>
      </div>
      <div>
        <van-cell-group>
          <van-field v-model="username" label="收件姓名" icon="clear" placeholder="请输入收件姓名" @click-icon="username = ''" />
          <van-field v-model="userphone" label="手机号码" icon="clear" placeholder="请输入手机号码" @click-icon="userphone = ''" />
          <div @click="show=true" style="border-bottom: 1px solid #eee;">
            <van-field label="所在省市" placeholder="请选择所在省市" :value="changeAddress" disabled/>
          </div>
          <van-field v-model="useraddress" label="详细地址" type="textarea" placeholder="请输入详细地址，以便尽快收到相关保单资料" rows="1" autosize/>
        </van-cell-group>
        <van-popup position="bottom" v-model="show">
          <van-area :columns-num="2" :area-list="areaList" @confirm="confirm" @cancel="cancel" />
        </van-popup>
      </div>
    </div>
    <div class="bottom">
      <div class="kf" @click="phone">
        <a class="iconfont icon-kefu"></a>
        <p>客服</p>
      </div>
      <div class="total">
        合计金额：
        <span>￥{{Number(QuoteInfor.OrderAmount).toFixed(2)}}</span>
      </div>
      <div class="next" @click="next()" v-show="twice == false">
        确认提交
      </div>
      <div class="next" v-show="twice == true">
        <van-loading type="circle" color="black" style="display: inline-block; margin-right: 10px; top: -2px;" />提交中...
      </div>
    </div>
  </div>
</template>
<script>
import api from '../fetch/api.js';
import Address from '../js/addressData.json'
import {
  Field,
  Cell,
  CellGroup,
  Area,
  Popup,
  Toast,
  Loading
} from 'vant';
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Area.name]: Area,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
  },
  data() {
    return {
      //省市选择
      show: false,
      areaList: Address.arealist,
      changeAddress: '',
      //保单寄送资料
      username: '',
      userphone: '',
      useraddress: '',
      userprovince: '',
      usercity: '',
      provinceID: '',
      cityID: '',
      //自定义
      QuoteInfor: '',
      twice: false,
    }
  },
  created() {
    api.Post('Order/PHQuoteInfo/GetOneModel', {
      ID: this.$route.params.id
    })
      .then(res => {
        this.QuoteInfor = res
      })
  },
  methods: {
    next() {
      var data = {
        ID: this.$route.params.id,
        Addressee: this.username,
        DetailedAddress: this.useraddress,
        ContactPhone: this.userphone,
        ProvinceName: this.userprovince,
        ProvinceID: this.provinceID,
        CityName: this.usercity,
        CityID: this.cityID,
      }
      // console.log(data)
      if (data.Addressee == '') {
        Toast.fail('请填写收件姓名！');
        return;
      }
      if (data.ContactPhone == '') {
        Toast.fail('请填写手机号码！');
        return;
      }
      if (data.ProvinceName == '' || data.CityName == '') {
        Toast.fail('请选择所在省市！');
        return;
      }
      if (data.DetailedAddress == '') {
        Toast.fail('请填写详细地址！');
        return;
      }
      this.twice = true
      api.Post('Insurance/PHInsuranceOrder/AddPHINsOrder', data)
        .then(res => {
          if (res.Success == true) {
            Toast.success(res.Msg);
            // this.$router.push('/Voucher/' + res.Infor + '/1/1')
            var _this=this;
            _this.$router.push('/FQPay/' + res.Infor + '/-1')
          } else {
            this.twice = false
            Toast.fail(res.Msg);
          }
        })
    },
    //省市区选择
    confirm(Num) {
      for (var i = 0; i < Num.length; i++) {
        if (Num[i].code == -1) {
          Toast.fail('请正确选择省市！');
          return;
        }
      }
      this.provinceID = Num[0].code.substr(0, 2)
      this.cityID = Num[1].code.substr(2, 3)
      this.userprovince = Num[0].name
      this.usercity = Num[1].name
      this.changeAddress = Num[0].name + Num[1].name
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    phone() {
      window.location.href = "tel:400-170-1235";
    }
  }
}

</script>
<style scoped>
.box {
  width: 94%;
  overflow: hidden;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
}

.title {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.title div {
  border-left: 3px solid #2491ff;
  padding-left: 7px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.content div {
  padding: 10px 0;
  margin: 0 10px;
  color: #333;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.content p {
  float: right;
  margin: 0;
}

.content span {
  color: #999;
}

.info {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
}

.info p {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 14px;
  color: #333;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  height: 50px;
  border-top: 1px solid #eee;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.kf {
  width: 20%;
  float: left;
  border-right: 1px solid #eee;
  margin-right: -1px;
  text-align: center;
}

.kf a {
  color: #2491ff;
  font-size: 24px;
  margin-top: 5px;
  display: block;
}

.kf p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.total {
  width: 50%;
  float: left;
  line-height: 50px;
  text-align: center;
  color: #666666;
  font-size: 14px;
}

.total span {
  color: #f33e16;
  font-size: 16px;
}

.next {
  width: 30%;
  float: right;
  line-height: 50px;
  background: #2491ff;
  color: #fff;
  text-align: center;
  font-size: 16px;
}
</style>
<style src="../css/iconfont.css"></style>
